import React from "react";
import "./style.less";
// import {
//   TemplateDetail,
//   GeneralCard,
//   Card as CardTemplate,
// } from "@api/TemplateManage/model";
import { Button } from "antd-mobile";

export const Card = (card) => {
  // const card = template[item];
  const mediaType =
    card?.media.mediaContentType.indexOf("mp4") !== -1 ? "video" : "image";

  return (
    <div className="generalPurposeCard">
      <div className="head">
        {mediaType === "video" ? (
          <video src={card?.media.mediaUrl} controls={true}>
            您的浏览器不支持 video 标签。
          </video>
        ) : (
          <img src={card?.media.thumbnailUrl || ""} />
        )}
      </div>
      <div className="info">
        <div className="title">{card?.title}</div>
        <div className="describe">{card?.description}</div>
      </div>
      <div className="btns">
        {card?.suggestions.map((btn) => {
          if (btn.action) {
            return (
              <div>
                <Button block size="small">{btn.action.displayText}</Button>
              </div>
            );
          } else if (btn.reply) {
            return (
              <div>
                <Button block size="small">{btn.reply.displayText}</Button>
              </div>
            );
          }
        })}
      </div>
    </div>
  );
};

export default class MessageTemplate extends React.Component {
  static defaultProps = {
    //设置props默认值方法
  };

  state = {};

  componentDidMount() {}

  render() {
    const { template } = this.props;
    // console.log("template", template);

    return (
      <div className="templatePreview">
        {Object.keys(template).map((item) => {
          if (item === "text" && template[item]) {
            return <div className="text">{template[item]}</div>;
          } else if (item === "media" && template[item]) {
            const media = template[item];
            const mediaType = media?.mediaContentType.split("/")[1];
            console.log("media", media, mediaType);

            if (
              mediaType === "jpg" ||
              mediaType === "jpeg" ||
              mediaType === "png"
            ) {
              return (
                <div className="image">
                  <img src={media?.mediaUrl} alt="" />
                </div>
              );
            } else if (mediaType === "mp4") {
              return (
                <div className="video">
                  <video controls src={media?.mediaUrl}></video>
                </div>
              );
            } else if (mediaType === "mp3" || mediaType === "amr") {
              return (
                <div className="audio">
                  <audio controls src={media?.mediaUrl}></audio>
                </div>
              );
            } else {
              // console.log("不支持该多媒体展示");
              
              return (
                <div className="image">
                  <div>不支持该多媒体展示</div>
                </div>
              );
            }
          } else if (item === "generalPurposeCard" && template[item]) {
            const card = template[item];
            const mediaType =
              card?.content.media.mediaContentType.indexOf("mp4") !== -1
                ? "video"
                : "image";

            if (card) return <Card {...card.content}></Card>;
          } else if (item === "generalPurposeCardCarousel" && template[item]) {
            const cards = template[item];
            return (
              <div className="generalPurposeCardCarousel">
                {" "}
                {cards?.content.map((card) => {
                  return <Card {...card}></Card>;
                })}
              </div>
            );
          } else if (item === "fallToSuperSms" && template[item]) {
            return <div className="otherTemplate">暂不支持该消息模板展示</div>;
          } else if (item === "menu" && template[item]) {
            const btns = template[item];
            // console.log("===", btns);

            return (
              <div className="menuBtns">
                {btns.map((btn) => {
                  if (btn.action) {
                    return (
                      <Button size="small">{btn.action.displayText}</Button>
                    );
                  } else if (btn.reply) {
                    return (
                      <Button size="small">{btn.reply.displayText}</Button>
                    );
                  }
                })}
              </div>
            );
          }
        })}
      </div>
    );
  }
}
